import React, { useState } from 'react'
import './Todoheader.css'
export default function Todoheader(props) {
    let {addTodo}=props;
    //props 接受到的数据是只读的.

    //设置状态
    // 把输入框内容写入状态
    let [title,setTitle]=useState('');

    //获取输入框值 todo
    let gettitle=(e)=>{
        setTitle(e.target.value);
    }

    //按下回车 确认数据
    let add=(e)=>{
        if(e.keyCode===13&&title.length!==0){
            // input内置属性value来判断title.length，不用调用真实dom
            addTodo(title);
            setTitle('');
        }
    }

  return (
    <>
        <div className="todo-header">
            {/* 用onchang事件获取输入框内输入的内容value */}
        <input value={title} onChange={gettitle} onKeyUp={add} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    </>
  )
}
